import {
    withNavigation
} from 'react-navigation';

import React, {Component} from 'react';
import {Image,TouchableOpacity,StyleSheet,View} from 'react-native';

import {scaleSize} from '../../../utils/screen';
import FontText from '../../components/FontText';
import { i18n } from '../../../i18n';

class Hearder extends Component {
    render(){
        let {isBack = true,title = "",rightComponent = null} = this.props;
        return (
            <View style = {styles.header}>
                <View style = {styles.title}>
                    <FontText style = {styles.titleText} font = {'book'}>{title}</FontText>
                </View>
                {
                    isBack
                    ?<TouchableOpacity
                        activeOpacity = {0.8}
                        onPressIn = {()=>this.goBack()}
                        style = {styles.backView}
                        >
                        <Image style = {styles.backIcon} source = {require("../../../access/imgs/back.png")} />
                        <FontText style = {styles.backText} font = {'book'}>{i18n.t("btns.back")}</FontText>
                    </TouchableOpacity>
                    :null
                }
                <View
                    style = {styles.right}
                    >
                    {rightComponent && rightComponent()}
                </View>
            </View>
        )
    }
    goBack(){
        let {navigation,goBack} = this.props;
        if(typeof goBack == "function"){
            if(!goBack()){
                navigation.goBack();
            }
        }else{
            navigation.goBack();
        }
    }
}

export default withNavigation(Hearder);

const styles  = StyleSheet.create({
    header:{
        backgroundColor: "#fd265d",
        height:scaleSize(110),
        flexDirection: 'row',
        borderLeftColor:"#fff",
        flex:1
    },
    backView:{
        width:scaleSize(200),
        paddingLeft: scaleSize(30),
        flexDirection:"row",
        alignItems:"center",
        position:"absolute",
        left:0,
        height:scaleSize(110),
        zIndex:99
    },
    backText:{
        color:"#fff",
        fontSize:scaleSize(30),
        paddingLeft:scaleSize(9)
    },
    backIcon:{
        width:scaleSize(32),
        height:scaleSize(32),
    },
    title:{
        justifyContent:"center",
        alignItems:"center",
        flex:1,
        paddingHorizontal:scaleSize(200)
    },
    titleText:{
        color:"#fff",
        fontSize:scaleSize(30),
        fontWeight:"bold"
    },
    right:{
        width:scaleSize(200),
        flexDirection:"row",
        alignItems:"center",
        position:"absolute",
        height:scaleSize(110),
        zIndex:99,
        right:0,
        justifyContent:"flex-end",
        paddingRight:scaleSize(30)
    }
})